<template>
  <div class="box">
    <div class="w-[100%] h-[220px] lg:h-[300px]">
      <img
        class="object-cover w-full h-full"
        src="https://www.globevisa.com.cn/uploadfile/2023/0828/20230828142801_3721.jpg"
        alt=""
      />
    </div>
    <div class="b pt-[30px]">
      <div class="text-center">
        <h1 class="text-[32px] text-[#c8c8c8]">COMPANY PROFILE</h1>
        <h2 class="text-[#090909] text-[18px] mt-3">—— 公司简介 ——</h2>
      </div>
      <div
        class="max-w-[1600px] mx-auto grid items-start lg:grid-cols-2 gap-5 lg:gap-12 lg:mt-10 lg:mb-10"
      >
        <div class="w-full p-3 lg:pl-12 lg:pr-10">
          <div class="w-full pb-[60%] relative">
            <img
              class="absolute w-full h-full object-cover"
              :src="companyActive.company_intro_image_url"
              alt=""
            />
          </div>
          <div class="flex flex-wrap gap-1 mt-1">
            <div
              class="w-[calc(25%-4px)] h-[50px] text-center leading-[50px] cursor-pointer about-item"
              :class="item.id === companyActive.id ? 'about-active' : ''"
              v-for="(item, index) in companyList"
              :key="index"
              @click="companyActive = item"
            >
              {{ item.company_intro_area }}
            </div>
          </div>
        </div>
        <div class="flex-1 p-3">
          <h1 class="text-[28px] font-bold">
            {{ companyActive.company_intro_title }}
          </h1>
          <p
            class="mt-[30px] leading-loose h-auto lg:h-[300px] overflow-y-auto"
          >
            {{ companyActive.company_intro_content }}
          </p>
        </div>
      </div>
    </div>
    <!-- 优势 -->
    <div class="bg-[#f5f5f5] our">
      <div class="b py-[30px]">
        <div class="text-center">
          <h1 class="text-[32px] text-[#fff]">OUR ADVANTAGE</h1>
          <h2 class="text-[#fff] text-[18px] mt-3">—— 我们的优势 ——</h2>
        </div>
        <div
          class="flex flex-col items-center p-2 gap-2 mt-10 w-full max-w-[1500px] mx-auto"
        >
          <div class="w-full grid lg:grid-cols-3 gap-2">
            <div
              v-for="(item, index) in advantage.t"
              :key="index"
              class="bg-white p-10 flex flex-col justify-center items-center w-full min-h-[220px]"
            >
              <img
                :src="item.icon"
                :alt="item.title"
                class="w-12 h-12 mb-4 object-cover"
              />
              <div class="text-[18px] mb-2 text-center">
                {{ item.title }}
              </div>
              <div
                class="text-[12px] text-gray-600 text-center leading-relaxed"
              >
                {{ item.tips }}
              </div>
            </div>
          </div>
          <div class="w-full grid lg:grid-cols-4 gap-2">
            <div
              v-for="(item, index) in advantage.b"
              :key="index"
              class="bg-white shadow p-10 flex flex-col items-center w-full min-h-[220px]"
            >
              <img
                :src="item.icon"
                alt="icon4"
                class="w-12 h-12 mb-4 object-cover"
              />
              <div class="text-[18px] mb-2 text-center">{{ item.title }}</div>
              <div
                class="text-[12px] text-gray-600 text-center leading-relaxed"
              >
                {{ item.tips }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公司大事 -->
    <div class="mt-3">
      <div class="text-center mb-2">
        <h1 class="text-[32px] text-[#c8c8c8]">COMPANY MAJOR EVENTS</h1>
        <h2 class="text-[#000] text-[16px] mt-3">—— 公司大事记 ——</h2>
      </div>
      <Swiper
        :pagination="true"
        :autoplay="{
          delay: 3000,
        }"
        :loop="true"
        :modules="modules"
        class="h-[220px] lg:h-[310px]"
      >
        <swiper-slide v-for="item in 5" :key="item">
          <img
            class="w-full h-full object-cover"
            src="http://cdn.pacificimmi.com/dir/3377ebce122724d68fef107a9d42b2ce.jpg"
            alt=""
          />
        </swiper-slide>
      </Swiper>
    </div>
    <!--  -->
    <div class="our-1 pt-10 pb-10 lg:pb-[200px]">
      <div class="b lg:py-[30px]">
        <div class="text-center">
          <h1 class="text-[26px] text-[#fff]">HONORARY CERTIFICATE</h1>
          <h2 class="text-[#fff] text-[16px] mt-3">—— 荣誉资质 ——</h2>
        </div>
        <div class="mt-10 w-full grid grid-cols-2 lg:grid-cols-3 gap-5">
          <div class="w-full flex justify-center" v-for="item in 6" :key="item">
            <div class="w-[70%] pb-[60%] relative max-auto">
              <img
                class="absolute w-full h-full"
                src="http://cdn.pacificimmi.com/dir/967fcb48c527e2d32861e99c028315a7.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { companyIntroListApi } from "@/api";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
const modules = ref([Pagination, Autoplay]);
import "swiper/css";
import "swiper/css/pagination";
const companyList = ref([]);
const companyActive = ref({
  id: "",
  company_intro_area: "", //地区
  company_intro_content: "", // 公司介绍内容
  company_intro_image_url: "",
  company_intro_title: "", // 公司介绍标题
});
const advantage = ref({
  t: [
    {
      title: "中国移民行业专业机构",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/test_investment/trend.svg",
      tips: "项目更安全，管理更规范，服务更周到，价格更透明",
    },
    {
      title: "多年移民行业成功经验",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/test_investment/outIcon.svg",
      tips: "多年持续成功经验，迅速应对各国政策变动，帮助客户抢占先机",
    },
    {
      title: "快速抢案团队",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/About/about_record.svg",
      tips: "快速掌握移民局政策动向及基金公司配额规则，先人一步为客户赢得时机",
    },
  ],
  b: [
    {
      title: "大量成功案例",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/test_investment/successCases.svg",
      tips: "成功帮助众多家庭成功办理移民申请，获得绿卡",
    },
    {
      title: "律所护航",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/About/about_lushi.svg",
      tips: "国际移民律师城，海外专业律师团队全程服务",
    },
    {
      title: "强大的项目研发团队",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/test_investment/teamIcon.svg",
      tips: "实地考察项目，净调，评审，全程跟踪项目进展，为移民前中后保驾护航",
    },
    {
      title: "安家服务",
      icon: "http://cdn.pacificimmi.com/www.pacificimmi.cn/images/test_investment/settle.svg",
      tips: "一对一管家服务，涉及移民前期-中期-后期，全程无忧",
    },
  ],
});

// 公司介绍列表
const getCompanyList = () => {
  companyIntroListApi().then((res) => {
    companyList.value = res.items;
    companyActive.value = companyList.value[0];
  });
};
onMounted(() => {
  getCompanyList();
});
</script>

<style scoped lang="scss">
.about-item {
  &:hover {
    background: #343e83;
    color: #fff;
  }
}

.about-active {
  background: #343e83;
  color: #fff;
}

.our {
  background: url(/src/assets/images/about/advantage.jpg) no-repeat;
}

.our-1 {
  background: url(/src/assets/images/about/honor.jpg) no-repeat;
}
</style>
